<template>
  <div id="userReviews">
    <div class="comment">用户评论</div>
    <div class="albumContentDes" :style="{ height }">
      <ul class="list-view">
        <!-- 循环遍历 -->
        <li v-for="item in comments" :key="item.id">
          <!-- 左边头像 -->
          <div class="avatar">
            <span>
              <img :src="useFormatImgPath(item.smallHeader)" alt="" />
            </span>
          </div>
          <!-- 右边边评论信息 -->
          <div class="avatar1">
            <span class="aaa">{{ item.nickname }}</span>
            <p>
              {{ item.content }}
            </p>
            <div class="underside">
              <div class="call">
                <span style="margin-right: 5px; color: #555; line-height: 18px"
                  >回复</span
                >
                <span style="margin-right: 5px; color: #999">{{
                  moment().format('YYYY-MM-DD hh:mm:ss')
                }}</span>
              </div>
              <div class="call1">
                <span
                  style="margin-right: 5px; line-height: 20px; color: #999"
                  >{{ item.likes }}</span
                >
                <van-icon name="good-job" color="#999" />
              </div>
            </div>
          </div>
        </li>
      </ul>
      <h1 v-if="!comments.length" style="text-align: center">
        <van-empty
          image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
          image-size="80"
          description="快来评价吧！"
        />
      </h1>
      <div class="mask" :style="{ display }">
        <p class="dropBtn" @click="dropContent">
          <i class="iconfont icon-xiala1"></i>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 'UserReviews',
});
</script>

<script setup lang="ts">
import { reqGetAnchorComments } from '@/api/scz-detail.js';
import moment from 'moment';
import { useFormatImgPath } from '@/mixin/formatImgPath';
import { useRoute } from 'vue-router';
const route = useRoute();
//动态设置内容展示的高度
const height = ref('160px');
// 控制模态框的限时与隐藏
const display = ref('block');
// 展示文本内容区
function dropContent() {
  height.value = 'auto';
  display.value = 'none';
}
// 获取用户评价信息
 defineProps(['albumId']);
const page = ref(1);
const pageSize = ref(8);
const albumId = ref();
const comments = ref([]);
async function getAnchorComments() {
  try {
    const res = await reqGetAnchorComments(
      page.value,
      pageSize.value,
      albumId.value
    );
    // console.log(res, '评价信息');
    comments.value = res.data.comments;
  } catch (error) {
    console.log(error);
  }
}
// 监视props的id的变化
watch(
  () => route.params.id,
  (newValue) => {
    albumId.value = newValue;
    getAnchorComments();
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="less">
.comment {
  font-size: 18px;
  font-weight: 600;
}
.list-view {
  width: 100%;
  /* border: 1px solid red; */
  margin: auto;
  margin-top: 15px;
  li {
    padding: 10px 0;
    display: flex;
  }
}

img {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  margin-right: 9px;
  border-radius: 50%;
  overflow: hidden;
}
.avatar1 {
  width: 100%;
  /* border: 1px solid rgb(255, 89, 0); */
}
.aaa {
  line-height: 20px;
  /* margin-bottom: 4px; */
  color: #666;
  display: inline-block;
  font-size: 14px;
}
p {
  font-size: 14px;
  margin-top: 2px;
}

.underside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .call {
    display: flex;
    color: #666;
  }
}
.call1 {
  display: flex;
}
.van-icon {
  font-size: 18px;
}

.albumContentDes {
  position: relative;
  padding: 35px 15px 0;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);

  .content {
    width: 100%;
    :v-deep img {
      width: 100%;
    }
  }

  .mask {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, transparent 10%, #fff 100%);
    .dropBtn {
      width: 100%;
      height: 24px;
      position: absolute;
      bottom: 10%;
      text-align: center;
      color: red;
      i {
        font-size: 24px;
        vertical-align: bottom;
      }
    }
  }
}
</style>
